<!doctype html>
<html>
<head>
    <#include '../../public/head.ftl'>
    <title>随机密码生成器</title>
    <link href="../../../static/blog/css/info.css" rel="stylesheet">
    <link href="../../../static/blog/css/pure-min.css" rel="stylesheet">
    <meta name="keywords" content="随机,密码,生成,随机生成,随机密码,随机字符串"/>
    <link href="/static/tool/css/tool.css" rel="stylesheet">
</head>
<body>
<style>
    ul,h2{
      margin: 0;
    }
    #title,
    #main {
        margin: 0 auto;
        max-width: 768px;
    }

    #title {
        margin: 0 auto;
        padding: 1em 0 2em;
        border-bottom: 1px solid #eee;
        text-align: center;
        line-height: 1.5;
    }

    #title h1 {
        margin: 0;
        color: #444;
        font-weight: 300;
        font-size: 300%;
    }

    #title h2 {
        margin: 0;
        color: #666;
        font-weight: 300;
        font-size: 125%;
    }

    #main {
        padding-left: 10px;
        padding-right: 10px;
        max-width: 400px;
        margin-bottom: 100px;
    }

    .adsbygoogle {
        display: block !important;
        margin: 50px auto;
    }
    .newsview ul {
        margin: 0;
        padding: 0;
        border-top: 1px solid #eee;
        list-style: none;
        font-size: 14px;
    }

    .newsview li {
        clear: both;
        overflow: hidden;
        padding: .5em 0;
        border-bottom: 1px solid #eee;
    }

    .pure-form label {
        display: block;
        overflow: hidden;
        margin: 0;
    }

    .pure-form span {
        float: left;
        margin: 6px 0;
    }

    .newsview input {
        float: right;
        margin-top: 9px;
    }


    #generate {
        margin: 1em 0;
    }

</style>
<#include '../../public/header.ftl'>
<div style="height: 80px"></div>

<article>
    <main>
        <div class="lz-width-1200 lz-margin-auto lz-padding-left-30 lz-padding-right-30 lz-bg-white">
            <ol class="breadcrumb">
                <li><a href="/tool/index.html">工具箱</a></li>
                <li class="active">随机密码生成器</li>
            </ol>
        </div>
        <div class="infosbox">
            <div class="newsview">
                <div id="title">
                    <h1>随机密码生成器</h1>
                </div>

                <form id="main" class="pure-form">
                    <ul>
                        <li><label><input type="checkbox" name="include_number" checked /><span>数字</span></label></li>
                        <li><label><input type="checkbox" name="include_lowercaseletters" checked /><span>小写字母</span></label></li>
                        <li><label><input type="checkbox" name="include_uppercaseletters" checked /><span>大写字母</span></label></li>
                        <li><label><span>特殊符号</span><input type="text" name="special_characters" placeholder="输入需要添加的特殊符号" /></label></li>
                        <li><label><span>排除字符</span><input type="text" name="exclude_characters" placeholder="比如：i, l, 1, L, o, 0, O" /></label></li>
                        <li><label><input type="checkbox" name="password_unique" /><span>字符不重复</span></label></li>
                        <li><label><span>密码长度</span><input type="number" name="password_length" min="0" value="8" /></label></li>
                        <li><label><span>密码数量</span><input type="number" name="password_quantity" min="0" value="1" /></label></li>
                    </ul>
                    <button type="button" id="generate" class="pure-button pure-button-primary pure-input-1">生成密码</button>
                    <textarea name="output" class="pure-input-1" cols="40" rows="7" readonly></textarea>
                </form>

                <script>
                    var form = document.getElementById('main');

                    function rand(max) {
                        return Math.floor(Math.random() * max);
                    }

                    document.getElementById('generate').onclick = function () {
                        var chars = '';
                        var passwords = [];
                        var passwordUnique = form.password_unique.checked;
                        var quantity = Number(form.password_quantity.value);

                        if (form.include_number.checked) chars += '0123456789';
                        if (form.include_lowercaseletters.checked) chars += 'abcdefghijklmnopqrstuvwxyz';
                        if (form.include_uppercaseletters.checked) chars += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
                        if (form.special_characters.value) chars += form.special_characters.value;
                        if (form.exclude_characters.value) chars = chars.replace(new RegExp(form.exclude_characters.value.split('').join('|'), 'g'), '');

                        while (passwords.length < quantity) {
                            var _chars = chars.split('');
                            var password = '';

                            for (var i = 0, l = form.password_length.value; i < l; i++) {
                                if (_chars.length < 1) break;

                                var idx = rand(_chars.length);
                                password += _chars[idx];
                                if (passwordUnique) _chars.splice(idx, 1);
                            }

                            if (passwords.indexOf(password) === -1) passwords.push(password);
                        }

                        form.output.value = passwords.join('\n');
                    };

                    form.output.onfocus = function () {
                        this.select();
                    };

                    function loadConfig() {
                        var config = JSON.parse(localStorage.getItem('passwordConfig'));

                        Object.keys(config).forEach(function(name) {
                            var value = config[name];
                            var input = form[name];

                            if (input.type === 'checkbox') {
                                input.checked = value;
                            } else {
                                input.value = value;
                            }
                        });
                    }

                    function saveConfig() {
                        var config = {};

                        [].forEach.call(form.getElementsByTagName('input'), function(input) {
                            config[input.name] = input.type === 'checkbox' ? input.checked : input.value;
                        });

                        localStorage.setItem('passwordConfig', JSON.stringify(config));
                    }

                    [].forEach.call(form.getElementsByTagName('input'), function(input) {
                        input.addEventListener('change', saveConfig);
                    });

                    if (localStorage.getItem('passwordConfig')) {
                        loadConfig();
                    }
                </script>

            </div>
        </div>
    </main>
</article>
<#include '../../public/footer.ftl'>
</body>
</html>
